<template>
  <a-modal :title="'工艺单打印'" :visible="true" :width="mainWidth" :footer="null" id="printMain" @cancel="reset">
    <a-button type="primary" style="position: absolute;right: 25px;top:60px" v-print="'#print'">打印</a-button>
    <a-tabs default-active-key="1" @change="callback" v-model="tabMenu">
      <a-tab-pane key="1" tab="新款扩色工艺单">
      </a-tab-pane>
      <a-tab-pane key="2" tab="大货工艺材料单" force-render>
      </a-tab-pane>
      <a-tab-pane key="3" tab="特殊工艺确认单" force-render>
      </a-tab-pane>
      <a-tab-pane key="4" tab="特艺定位花打印模版" force-render>
      </a-tab-pane>
      <a-tab-pane key="5" tab="工艺材料单" force-render>
      </a-tab-pane>
    </a-tabs>
    <div style="display:flex;flex-direction:row" id="print">
      <div class="main" :style="{ width: tabMenu == 2 ?'50%':'100%'}" v-if="tabMenu == 1 || tabMenu == 2">

        <div id="firstDe">
          <a-descriptions style="text-align:center;" :title="title" bordered>
            <a-descriptions-item label="样衣号">
              {{list.sampleCode}}
            </a-descriptions-item>
            <a-descriptions-item label="款号">
              {{list.designName}}
            </a-descriptions-item>
            <a-descriptions-item label="品名">
              {{list.sampleName}}
            </a-descriptions-item>

          </a-descriptions>
        </div>
        <div style="height: 300px;width: 100%;border: 1px solid #e8e8e8;display: flex;padding:10px;border-bottom: 0;" :style="{ justifyContent: !list.detailImg ?'center':'space-between'}">
          <img :src="list.styleImg" :style="{ width: !list.detailImg ?'100%':'50%',objectFit: 'contain'}" :alt="list.styleImg">
          <img :src="list.detailImg" v-if="list.detailImg" :style="{ width: !list.detailImg ?'100%':'50%',objectFit: 'contain'}" :alt="list.detailImg">
        </div>
        <a-descriptions bordered :column="1" class="labelStr">
          <a-descriptions-item label="统一工艺" v-if="craftBillTemplateVos.length">
            <div style="display:flex;flex-direction:column">
              <span v-for="item,i in craftBillTemplateVos" :key="i">
                {{i+1}}:{{item.partName}}{{item.description}}
              </span>
            </div>
            <div style="position: relative;top: 13px;padding: 4px 20px 0;border-top: 1px solid #e8e8e8;margin: 0 -24px;">
              <a-row>
                <a-col :span="6">
                  ✔不可拆线
                </a-col>
                <a-col :span="6">
                  ✔点位
                </a-col>
                <a-col :span="6">
                  ✔不可锥位
                </a-col>
                <a-col :span="6">
                  ✔不用色粉
                </a-col>
              </a-row>

            </div>
          </a-descriptions-item>
          <a-descriptions-item label="隐形工艺" v-if="partList1.length && tabMenu == 1">
            <div style="display:flex;flex-direction:column">
              <div style="display:flex">
                <div v-for="item,i in partList1" :key="i" :style="{ display: 'flex', justifyContent: partList1.length<=1 ?'center':'space-between',width:partList1.length<=1 ?'100%':`${98/partList1.length}%`}">
                  <div style="margin:auto">
                    <img :src="item.imgurl" :style="{ width: partList1.length<=1 ?'300px':'250px',height: partList1.length<=1 ?'200px':'150px',objectFit: 'contain'}" :alt="item.imgurl">
                  </div>
                </div>
              </div>
              <div style="display:flex;flex-direction:column;margin-top:5px">
                <span v-for="item,i in partList1" :key="i">
                  {{i+1}}:{{item.description}}
                </span>
              </div>
            </div>
          </a-descriptions-item>
          <a-descriptions-item label="拼缝" v-if="partList2.length && tabMenu == 1">
            <div style="display:flex;flex-direction:column">
              <div style="display:flex">
                <div v-for="item,i in partList2" :key="i" :style="{ display: 'flex', justifyContent: partList2.length<=1 ?'center':'space-between',width:partList2.length<=1 ?'100%':`${98/partList2.length}%`}">
                  <div style="margin:auto">
                    <img :src="item.imgurl" :style="{ width: partList2.length<=1 ?'300px':'250px',height: partList2.length<=1 ?'200px':'150px',objectFit: 'contain'}" :alt="item.imgurl">
                  </div>
                </div>
              </div>
              <div style="display:flex;flex-direction:column">
                <span v-for="item,i in partList2" :key="i">
                  {{i+1}}:{{item.description}}
                </span>
              </div>
            </div>

          </a-descriptions-item>
          <a-descriptions-item label="后道工序" v-if="list.beof">
            <div style="white-space: pre-line;margin-top:-20px;">
              {{list.beof}}
            </div>
          </a-descriptions-item>
          <a-descriptions-item label="主唛" v-if="partList3.length">
            <div style="display:flex;flex-direction:column">
              <div style="display:flex">
                <div v-for="item,i in partList3" :key="i" :style="{ display: 'flex', justifyContent: partList3.length<=1 ?'center':'space-between',width:partList3.length<=1 ?'100%':`${98/partList3.length}%`}">
                  <div style="margin:auto">
                    <img :src="item.imgurl" :style="{ width: partList3.length<=1 ?'300px':'250px',height: partList3.length<=1 ?'200px':'150px',objectFit: 'contain'}" :alt="item.imgurl">
                  </div>
                </div>
              </div>
              <div style="display:flex;flex-direction:column">
                <span v-for="item,i in partList3" :key="i">
                  {{i+1}}:{{item.description}}
                </span>
              </div>
            </div>

          </a-descriptions-item>
          <a-descriptions-item label="检验要点" v-if="list.beof">
            <div style="white-space: pre-line;margin-top:-20px;">
              {{list.beof}}
            </div>
          </a-descriptions-item>
          <a-descriptions-item label="吊牌包装" v-if="partList3.length">
            <div style="display:flex;flex-direction:column">
              <div style="display:flex">
                <div v-for="item,i in partList3" :key="i" :style="{ display: 'flex', justifyContent: partList3.length<=1 ?'center':'space-between',width:partList3.length<=1 ?'100%':`${98/partList3.length}%`}">
                  <div style="margin:auto">
                    <img :src="item.imgurl" :style="{ width: partList3.length<=1 ?'300px':'250px',height: partList3.length<=1 ?'200px':'150px',objectFit: 'contain'}" :alt="item.imgurl">
                  </div>
                </div>
              </div>
              <div style="display:flex;flex-direction:column">
                <span v-for="item,i in partList3" :key="i">
                  {{i+1}}:{{item.description}}
                </span>
              </div>
            </div>

          </a-descriptions-item>
        </a-descriptions>
        <a-descriptions bordered :column="4">
          <a-descriptions-item label="工艺师">
            {{list.statusUser}}
          </a-descriptions-item>
          <a-descriptions-item label="制版师">
            {{list.bs}}
          </a-descriptions-item>
          <a-descriptions-item label="放码师">
            {{list.fmshor}}
          </a-descriptions-item>
          <a-descriptions-item label="时间">
            {{list.statusTime}}
          </a-descriptions-item>
        </a-descriptions>

      </div>
      <div v-if="tabMenu == 2" style="width:50%">

        <a-descriptions bordered :column="2" style="text-align:center;" title="工艺编写" class="labelStr">
          <a-descriptions-item label="隐形工艺" :span="3" v-if="partList1.length && tabMenu == 2">
            <div style="display:flex;flex-direction:column">
              <div style="display:flex">
                <div v-for="item,i in partList1" :key="i" :style="{ display: 'flex', justifyContent: partList1.length<=1 ?'center':'space-between',width:partList1.length<=1 ?'100%':`${98/partList1.length}%`}">
                  <div style="margin:auto">
                    <img :src="item.imgurl" :style="{ width: partList1.length<=1 ?'300px':'250px',height: partList1.length<=1 ?'200px':'150px',objectFit: 'contain'}" :alt="item.imgurl">
                  </div>
                </div>
              </div>
              <div style="display:flex;flex-direction:column;margin-top:5px">
                <span v-for="item,i in partList1" :key="i">
                  {{i+1}}:{{item.description}}
                </span>
              </div>
            </div>
          </a-descriptions-item>
          <a-descriptions-item label="拼缝" :span="3" v-if="partList2.length">
            <div style="display:flex;flex-direction:column">
              <div style="display:flex">
                <div v-for="item,i in partList2" :key="i" :style="{ display: 'flex', justifyContent: partList2.length<=1 ?'center':'space-between',width:partList2.length<=1 ?'100%':`${98/partList2.length}%`}">
                  <div style="margin:auto">
                    <img :src="item.imgurl" :style="{ width: partList2.length<=1 ?'200px':'150px',height: partList2.length<=1 ?'150px':'100px',objectFit: 'contain'}" :alt="item.imgurl">
                  </div>
                </div>
              </div>
              <div style="display:flex;flex-direction:column">
                <span v-for="item,i in partList2" :key="i" style="text-align:left">
                  {{i+1}}:{{item.description}}
                </span>
              </div>
            </div>

          </a-descriptions-item>

        </a-descriptions>
        <div style="display:flex;flex-wrap:wrap;width:100%;border: 1px solid #e8e8e8;border-left: none;border-top: none;">
          <div v-for="item,i in allPart" :key="i" style="display:flex;">
            <div class="box">
              {{item.name}}
            </div>
            <div style="display:flex;flex-direction:row;padding: 0 10px;border: 1px solid rgb(232, 232, 232);">
              <div style="display:flex;flex-direction:column; padding: 5px;text-align: center;margin: 10px 0;" v-for="subitem,i in item.list" :key="i">
                <img :src="subitem.imgurl" :style="{ width: '115px',height:'100px',objectFit: 'contain'}" :alt="subitem.imgurl">
                <span> {{subitem.description}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="tabMenu == 3" style="width:100%">
        <div id="firstDe">
          <a-descriptions style="text-align:center;" title="特殊工艺确认单" bordered>
            <a-descriptions-item label="款号">
              {{list.designName}}
            </a-descriptions-item>
            <a-descriptions-item label="样衣号">
              {{list.sampleCode}}
            </a-descriptions-item>
            <a-descriptions-item label="季度">
              {{list.scseason}}
            </a-descriptions-item>
            <a-descriptions-item label="品名">
              {{list.sampleName}}
            </a-descriptions-item>
            <a-descriptions-item label="品类">
              {{list.sampleCat}}
            </a-descriptions-item>
            <a-descriptions-item label="色量">

            </a-descriptions-item>
          </a-descriptions>
        </div>
        <a-descriptions bordered :column="1" class="labelStr">
          <a-descriptions-item label="特殊工艺">
            <div style="white-space: pre-line;margin-top:-20px;">
              {{list.tyProcess}}
            </div>
          </a-descriptions-item>
          <a-descriptions-item label="排料/剪裁要求">
            <div style="white-space: pre-line;margin-top:-20px;">
              {{list.tyReq}}
            </div>
          </a-descriptions-item>
          <a-descriptions-item label="特殊工序">
            <div style="white-space: pre-line;margin-top:-20px;">
              {{list.tyProcess}}
            </div>
          </a-descriptions-item>
        </a-descriptions>
        <div style="border: 1px solid rgb(232, 232, 232);">
          <div v-for="item,i in specList" :key="i">
            <a-row class="specTitle">
              {{item.name}}
            </a-row>
            <a-row>
              <a-col :span='8' v-for="subitem,i in item.list" :key="i">
                <div style="display:flex;flex-direction:column;border: 1px solid rgb(232, 232, 232);">
                  <span class="color">色号:{{subitem.styColorId}}</span>
                  <img :src="subitem.imgurl" :alt="subitem.imgurl" style="width:200px;margin: auto;height: 250px;object-fit: scale-down;margin-top:10px">
                  <span class="color">跳码:{{subitem.jumpSize}}</span>
                </div>
              </a-col>
            </a-row>
          </div>
          <a-row class="comfirm">
            确认意见:
          </a-row>
        </div>
      </div>
      <div v-if="tabMenu == 4" style="width:100%">
        <a-row>
          <a-col :span="12" v-for="item,i in list.craftBillSpecVos" :key="i">
            <div id="firstDe">
              <a-descriptions style="text-align:center;" bordered>
                <a-descriptions-item label="款号">
                  {{list.designName}}
                </a-descriptions-item>
                <a-descriptions-item label="样衣号">
                  {{list.sampleCode}}
                </a-descriptions-item>
                <a-descriptions-item label="色号">

                </a-descriptions-item>
              </a-descriptions>
            </div>
            <div style="height: 300px;width: 100%;border: 1px solid #e8e8e8;display: flex;padding:10px;border-bottom: 0;" :style="{ justifyContent:'center'}">
              <img :src="item.imgurl" :style="{ width: '100%',objectFit: 'contain'}" :alt="item.imgurl">

            </div>
          </a-col>
        </a-row>
      </div>
      <div v-if="tabMenu == 5" style="width:100%">
        <div id="firstDe">
          <a-descriptions :column="4" style="text-align:center;" title="工艺材料单" bordered>
            <a-descriptions-item label="款号">
              {{list.designName}}
            </a-descriptions-item>
            <a-descriptions-item label="样衣号">
              {{list.sampleCode}}
            </a-descriptions-item>
            <a-descriptions-item label="安全技术类别">
              {{list.scseason}}
            </a-descriptions-item>
            <a-descriptions-item label="执行标准">
              {{list.sampleName}}
            </a-descriptions-item>
            <a-descriptions-item label="品名" span="2">
              {{list.sampleName}}
            </a-descriptions-item>
            <a-descriptions-item label="安全技术类别1">
              {{list.scseason}}
            </a-descriptions-item>
            <a-descriptions-item label="执行标准1">
              {{list.sampleName}}
            </a-descriptions-item>
            <a-descriptions-item label="洗水图标" span="3">

            </a-descriptions-item>
            <a-descriptions-item label="维护方法">
              {{list.scseason}}
            </a-descriptions-item>
          </a-descriptions>
          <div id="changecol">
            <a-row style="border: 1px solid #e8e8e8;">
              <a-col :span="2" class="paper">
                纸样
              </a-col>
              <a-col :span="22">
                <a-row>
                  <a-col :span="5" class="contentH">
                    母版
                  </a-col>
                  <a-col :span="5" class="contentH">
                    纸样1
                  </a-col>
                  <a-col :span="5" class="contentH">
                    纸样2
                  </a-col>
                  <a-col :span="5" class="contentH">
                    纸样3
                  </a-col>
                  <a-col :span="5" class="contentH">
                    纸样4
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="5" v-for="count in 5" :key="count">
                    <a-row>
                      <a-col :span="8">
                        <a-row class="contentH">
                          经
                        </a-row>
                        <a-row class="contentH">
                          纬
                        </a-row>
                      </a-col>
                      <a-col :span="16" class="contentH">

                      </a-col>
                    </a-row>
                  </a-col>

                </a-row>
              </a-col>
            </a-row>
          </div>
          <a-descriptions :column="3" style="text-align:center;" bordered class="labelStr2">
            <a-descriptions-item label="面料名称" span="2">

            </a-descriptions-item>
            <a-descriptions-item label="面料正反面说明">

            </a-descriptions-item>
            <a-descriptions-item label="纸样数量" span="3">

            </a-descriptions-item>
            <a-descriptions-item label="裁床注意事项" span="3">

            </a-descriptions-item>

            <a-descriptions-item label="工序流程" span="3">

            </a-descriptions-item>
            <a-descriptions-item label="粘衬部位" span="2">

            </a-descriptions-item>
            <a-descriptions-item label="温度压力">

            </a-descriptions-item>
            <a-descriptions-item label="童装/婴童/蓬马工艺师手填跳码" span="3">

            </a-descriptions-item>
          </a-descriptions>
          <div>
            <a-row style="border: 1px solid #e8e8e8;">
              <a-col :span="7">
                <a-row class="lastTitle">
                  单位:cm
                </a-row>
                <a-row>
                  <a-col :span="4" class="contentH">
                    序号
                  </a-col>
                  <a-col :span="8" class="contentH">
                    号型/部位
                  </a-col>
                  <a-col :span="12" class="contentH">
                    成衣测量说明
                  </a-col>
                </a-row>
                <a-row>
                  <a-row v-for="count in 20" :key="count">
                    <a-col :span="4" class="contentH">
                      {{count}}
                    </a-col>
                    <a-col :span="8" class="contentH">

                    </a-col>
                    <a-col :span="12" class="contentH">

                    </a-col>
                  </a-row>

                </a-row>
              </a-col>
              <a-col :span="7">
                <a-row class="lastTitle">
                  纸样尺寸
                </a-row>

                <a-row>

                  <a-row v-for="count in 21" :key="count">
                    <a-col :span="4" class="contentH" v-for="count in 6" :key="count">
                    </a-col>
                  </a-row>

                </a-row>
              </a-col>
              <a-col :span="7">
                <a-row class="lastTitle">
                  成衣尺寸
                </a-row>

                <a-row>

                  <a-row v-for="count in 21" :key="count">
                    <a-col :span="4" class="contentH" v-for="count in 6" :key="count">
                    </a-col>
                  </a-row>

                </a-row>
              </a-col>
              <a-col :span="3">
                <a-row class="lastTitle">
                  偏差
                </a-row>
                <a-row v-for="count in 21" :key="count" class="contentH">

                </a-row>
              </a-col>
            </a-row>
          </div>
        </div>

      </div>
    </div>
  </a-modal>

</template>
// <script>
// document.addEventListener('DOMContentLoaded', function (event) {
//   let table = document.getElementById('content'),
//     htm = '页面内容……将tbody>td作为页面内容区，按需填放内容'
//   for (let i = 0; i < 100; i++) {
//     htm += '<div>页面内容' + (i + 1) + '</div>'
//   }
//   table.innerHTML = htm
// })
//
</script>
<script>
import { getDetailList, getA4Print, getA3Print, getSpecImgPrint, getSpecPrint, getBillList } from '@api/rd/index'

export default {
  components: {},

  props: {
    id: {
      type: [Number, String],
      default: ''
    }
  },

  data() {
    return {
      list: {},
      partList1: [],
      partList2: [],
      mainWidth: '60%',
      partList3: [],
      title: '新款扩色工艺单',
      tabMenu: '1',
      craftBillTemplateVos: [],
      allPart: [],
      specList: []
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo || null
    }
  },
  created() {
    const { id } = this.$props
    if (id) {
      // this.getDetail()
      this.getA4()
    }
  },
  methods: {
    callback(key) {
      this.list = {}
      this.partList1 = []
      this.partList2 = []
      this.partList3 = []
      this.craftBillTemplateVos = []
      this.allPart = []
      this.specList = []
      if (key == 1) {
        this.title = '新款扩色工艺单'
        this.mainWidth = '60%'
        this.getA4()
      } else if (key == 2) {
        this.title = '大货工艺材料单'
        this.mainWidth = '1458px'
        this.getA3()
      } else if (key == 3) {
        this.mainWidth = '60%'
        this.getSpec()
      } else if (key == 4) {
        this.mainWidth = '1450px'
        this.getSpecImg()
      } else if (key == 5) {
        this.mainWidth = '1210px'
      }
      this.tabMenu = key
    },
    reset() {
      this.$emit('closePrint')
    },
    async getA4() {
      const params = {
        id: this.id
      }
      try {
        const res = await getA4Print('bill', params)
        if (res.code == 200) {
          this.list = res.data
          this.craftBillTemplateVos = res.data.craftBillTemplateVos
          this.partList1 = this.list.stealth
          this.partList2 = this.list.piece
          this.partList3 = this.list.mark
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取新款扩色工艺单失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取新款扩色工艺单失败！')
      }
    },
    async getA3() {
      const params = {
        id: this.id
      }
      try {
        const res = await getA3Print('bill', params)
        if (res.code == 200) {
          this.list = res.data
          this.craftBillTemplateVos = res.data.craftBillTemplateVos
          this.partList3 = this.list.mark
          this.partList1 = this.list.stealth
          this.partList2 = this.list.piece
          const newArr = []
          this.list.others.map(x => {
            x.name = x.partName
            let index = newArr.findIndex(y => y.name == x.name)
            if (index == -1) {
              newArr.push({
                name: x.name,
                list: [
                  {
                    imgurl: x.imgurl,
                    description: x.description
                  }
                ]
              })
            } else {
              newArr[index].list.push({
                imgurl: x.imgurl,
                description: x.description
              })
            }
          })
          this.allPart = newArr
          // this.specList = res.data.craftBillSpecVos
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取大货工艺单详情失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取大货工艺单详情失败！')
      }
    },
    async getSpec() {
      const params = {
        id: this.id
      }
      try {
        const res = await getSpecPrint('bill', params)
        if (res.code == 200) {
          this.list = res.data
          const newArr = []
          this.list.craftBillSpecVos.map(x => {
            x.name = x.specName
            let index = newArr.findIndex(y => y.name == x.name)
            if (index == -1) {
              newArr.push({
                name: x.name,
                list: [
                  {
                    jumpSize: x.jumpSize,
                    styColorId: x.styColorId,
                    imgurl: x.imgurl
                  }
                ]
              })
            } else {
              newArr[index].list.push({
                jumpSize: x.jumpSize,
                styColorId: x.styColorId,
                imgurl: x.imgurl
              })
            }
          })
          this.specList = newArr
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取特殊工艺确认单失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取特殊工艺确认单失败！')
      }
    },
    async getSpecImg() {
      const params = {
        id: this.id
      }
      try {
        const res = await getSpecImgPrint('bill', params)
        if (res.code == 200) {
          this.list = res.data
          this.specList = res.data.craftBillSpecVos
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取特艺定位花打印模版失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取特艺定位花打印模版失败！')
      }
    }
  }
}
</script>

<style scoped>
#photo .ant-descriptions-bordered .ant-descriptions-item-label {
  background-color: #fff;
}
.labelStr .ant-descriptions-item-label {
  width: 40px;
  writing-mode: tb;
  letter-spacing: 10px;
  text-align: center;
}
.labelStr2 .ant-descriptions-item-label {
  width: 180px;
}
@page {
  size: auto;
}
/* @media print {
  html {
    zoom: 70%;
  }
} */
#print .ant-descriptions-bordered .ant-descriptions-item-label {
  font-weight: 500;
  font-size: 18px;
}
#print .ant-descriptions-title {
  font-size: 24px;
}
#firstDe .ant-descriptions-item-content {
  font-size: 18px !important;
}
#print .ant-descriptions-item-content {
  font-size: 16px;
}
.box {
  width: 76px;
  background: #fafafa;
  font-weight: 500;
  font-size: 18px;
  writing-mode: tb;
  padding: 16px 24px;
  letter-spacing: 10px;
  text-align: center;
  border-bottom: 1px solid #e8e8e8;
}
.specTitle {
  height: 61px;
  background: #fafafa;
  text-align: center;
  font-size: 20px;
  font-weight: 500;
  line-height: 60px;
}
.color {
  height: 30px;
  font-size: 21px;
  margin-top: 10px;
  text-align: center;
}
.comfirm {
  height: 100px;
  padding: 20px;
  line-height: 60px;
  font-size: 18px;
  font-weight: 500;
}
.contentH {
  border: 1px solid #e8e8e8;
  height: 40px;
  font-size: 16px;
  text-align: center;
  line-height: 40px;
  font-weight: 500;
}
.lastTitle {
  font-size: 18px;
  font-weight: 500;
  background: #fafafa;
  line-height: 60px;
  border: 1px solid #e8e8e8;
  height: 60px;
  text-align: center;
}
.paper {
  font-size: 18px;
  font-weight: 500;
  background: #fafafa;
  line-height: 97px;
  height: 120px;
  text-align: center;
  writing-mode: tb;

  letter-spacing: 10px;
}
</style>
<style>
#changecol .ant-col-5 {
  width: 20%;
}
</style>